<!-- lou -->
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态时钟和九九乘法表</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }

        .clock-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .clock {
            font-size: 24px;
        }

        .date {
            font-size: 16px;
        }

        .week {
            font-size: 25px;
        }

        table {
            border-collapse: collapse;
            margin-top: 20px;
        }

        table,
        th,
        td {
            border: 1px solid #333;
        }

        th,
        td {
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="clock-container">
        <div class="week" id="week"></div>
        <div class="clock" id="clock"></div>
        <div class="date" id="date"></div>
    </div>

    <table>
        <caption>九九乘法表</caption>
        <tbody>
            <!-- 生成直角三角形九九乘法表 -->
            <script>
                for (let i = 1; i <= 9; i++) {
                    document.write("<tr>");
                    for (let j = 1; j <= i; j++) {
                        document.write("<td>" + j + " x " + i + " = " + (j * i) + "</td>");
                    }
                    document.write("</tr>");
                }
            </script>
        </tbody>
    </table>

    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            const weekDay = weekDays[now.getDay()];

            document.getElementById('week').textContent = `${weekDay}`;
            document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
            document.getElementById('date').textContent = `${year}年${month}月${day}日`;
        }

        // 每秒更新时钟
        setInterval(updateClock, 1000);
    </script>
</body>

</html>
